import React from 'react';
import style from './style.styl';
import {Button, Input, Select, error} from '../../../../ui-components';
import util from '../../../../util';
import cx from 'classnames';

class ProjectCreate extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'ProjectCreate';
    this.state = {
      fields: props.item || {
        name: '',
        role: '',
        score: '',
        comment: '',
      }
    }
  }
  onFieldChange = (item) => {
    this.setState({
      fields: {
        ...this.state.fields,
        ...item,
      }
    })
  }
  submit = () => {
    const {
      fields,
    } = this.state;
    for(var i in fields){
      if(!fields[i]) return error('请填写完整!');
    }
    this.props.submit(fields);
  }
  cancel = () => {
    this.setState({
      fields: {
        name: '',
        role: '',
        score: '',
        comment: '',
      }
    });
    this.props.cancel();
  }
  render() {
    return (
      <div className={cx({
        [style['create-form']]: true,
        [this.props.className]: this.props.className
      })}>
        <div>
          <Input 
            onChange={(e,v)=>{this.onFieldChange({'name': v})}}
            className={style['input']}
            label={'项目名称'}
            value={this.state.fields.name}
            placeholder="输入项目名称"
          />
          <Input 
            onChange={(e,v)=>{this.onFieldChange({'role': v})}}
            className={style['input']}
            label={'你的角色'}
            value={this.state.fields.role}
            placeholder="你在项目中扮演的角色，如：负责人、主要贡献者、提供帮助"
          />
          <Select 
            width={100}
            onChange={(e,v)=>{this.onFieldChange({'score': +e.target.value})}}
            className={style['select']}
            label={'贡献度'}
            value={this.state.fields.score}
            bubbleList={['＊标记你的工作对项目的影响程度，5为最高，1为最低']}
          >
            <option value={0}>请选择</option>
            <option value={1}>1</option>
            <option value={2}>2</option>
            <option value={3}>3</option>
            <option value={4}>4</option>
            <option value={5}>5</option>
          </Select>
          <Input 
            onChange={(e,v)=>{this.onFieldChange({'comment': v})}}
            className={style['input']}
            label={'描述及自评'}
            multi
            value={this.state.fields.comment}
            placeholder="请填写描述及自评"
          />
        </div>
        <div className={style['btn-bar']}>
          <Button label={'保存'} className={style['r-btn']} onClick={this.submit} />
          <Button label={'撤销'} className={style['c-btn']} onClick={this.cancel} />
        </div>
      </div>
    );
  }
}

export default ProjectCreate;
